<template>
  <div class="statistics-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>数据统计</span>
          <el-button type="success" @click="exportReport">导出报表</el-button>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>销量统计</template>
            <v-chart :option="salesOption" style="height: 400px;" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>营业额统计</template>
            <v-chart :option="revenueOption" style="height: 400px;" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
// 导入 ECharts 核心模块和渲染器
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'

// 注册必要的组件
echarts.use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent
])

const salesOption = ref({
  title: { text: '月度销量统计' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330],
    type: 'line'
  }]
})

const revenueOption = ref({
  title: { text: '月度营业额统计' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: { type: 'value' },
  series: [{
    data: [45000, 52000, 48000, 61000, 75000, 88000],
    type: 'bar'
  }]
})

const exportReport = () => {
  ElMessage.success('报表导出功能开发中...')
}
</script>

<style scoped>
.statistics-page {
  padding: 0;
}
</style> 